<template>
	<div>
		<div ref="echartsRef" style="width: 100%;height: 300px;"></div>
	</div>

</template>

<script setup lang="ts">
	import * as echarts from 'echarts';
	import { onMounted, ref, reactive } from 'vue';
	import chartapi from "../../api/chartapi"
	const echartsRef = ref(null)


	const xdata = ref([])
	const data = ref([])
	const ddata = ref([])
	const getdata = () => {
		chartapi.GetWeek({}).then(res => {
			console.log("res=", res.data);
			if (res.code == 1) {
				res.data.forEach(item => {
					xdata.value.push(item.weekday);
					data.value.push(item.num);
					// ddata.value.push({value:item.num})
				})
				console.log("xdata.value", xdata.value);
				console.log("data.value", data.value);
				init()
			}
		})
	}

	const init = () => {
		var myChart = echarts.init(echartsRef.value);
		// 设置图表的配置
		myChart.setOption({
			title:{
				text:'注册人数'			},
			tooltip: {
				trigger: 'item',
				left:'center'
			},
			legend: {
				top: '5%',
				left: 'center'
			},
			series: [
				{
					name: '注册人数',
					type: 'pie',
					radius: ['40%', '60%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: 30,
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: xdata.value.map((name, index) => ({
						value: data.value[index],
						name: name
					}))
				}
			]
		});
	}

	onMounted(() => {
		getdata()
	});
</script>

<style>

</style>